import type { EChartsOption } from 'echarts'

export interface HookOptions {
  dataSource:
    | {
        region?: string
        count?: string
      }[]
    | undefined
  valueFormatter?: (value: any) => string
}

export default function useMapCharts(options: HookOptions) {
  const chartsOptions = computed(() => {
    return {
      tooltip: {
        trigger: 'item',
        borderWidth: 0,
        formatter: (val: any) => {
          if (!val) {
            return ''
          }
          return `
            <div class="line-tooltip">
              <div class="time">${val?.name}</div>
              <div class="series">
                <div class="series-item">
                     <div style="border-color: #2F7BFF"></div>
                      <div>用户数量 </div>
                      <div>
                        ${
                          options.valueFormatter &&
                          options.valueFormatter(val.value)
                        }
                      </div>
                    </div>
              </div>
            </div>
          `
        }
      },
      backgroundColor: '#E4E7ED',
      visualMap: {
        type: 'continuous',
        orient: 'horizontal',
        inverse: true,
        min: 0,
        text: ['高', '低'],
        realtime: true,
        calculable: false,
        color: ['#2F7BFF', '#E1EEFF'],
        precision: 0,
        itemWidth: 8,
        show: false
      },
      roamController: {
        // 控制地图的上下左右放大缩小
        show: true,
        x: 'right',
        mapTypeControl: {
          china: true
        }
      },
      series: [
        {
          type: 'map',
          name: 'Map',
          map: 'WordMap',
          roam: true,
          itemStyle: {
            areaColor: '#fff',
            borderColor: '#E4E7ED',
            borderWidth: 1
          },
          data: options.dataSource?.map(({ region, count }) => {
            return {
              name: region?.includes('·') ? region.split('·')[1] : region,
              value: Number(count),
              itemStyle: { borderColor: '#fff' }
            }
          }),
          zoom: 1.3,
          center: [0, 0],
          select: {
            label: {
              color: '#222'
            },
            itemStyle: {
              areaColor: '#2F7BFF'
            }
          },
          emphasis: {
            label: {
              color: '#222'
            },
            itemStyle: {
              areaColor: '#2F7BFF'
            }
          }
        }
      ]
    } as EChartsOption
  })
  return {
    options: chartsOptions
  }
}
